import React from 'react'
import Reflux from 'reflux'
import ReactMixin from 'react-mixin'
import Action from '../../../action/action'
import Store from '../../../store/store'

import SideNavBar from '../../../component/sideNavBar/sideNavBar'
import EmptyBox from '../../../component/emptyBox/emptyBox'
import CouponItem from '../../../component/couponItem/couponItem'

export default class MyCoupon extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            list :[],
            notUsed : [],
            hasPass : [],
            hasUsed : [],
            navBarIndex : 0,
            userWallet : {},
        }
    }
    componentDidMount(){
        Action.getUserWallet(()=>{
            this.navBarSelect(this.state.navBarIndex)
        })

    }
    navBarSelect(i){
        this.setState({
            navBarIndex:i
        });
        window.location.href = `/#/my/coupon?${i}`
        this.selectList(i)
    }
    selectList(i){
        let couponList = this.state.userWallet && this.state.userWallet.couponList,
            _notUsed = [],
            _hasPass = [],
            _hasUsed = [],
            _list = [];
        couponList.map((obj)=>{
            if(!obj.hasUsed && !obj.hasPass){
                _notUsed.push(obj)
            }else if (!obj.hasUsed && obj.hasPass){
                _hasPass.push(obj)
            }else if(obj.hasUsed){
                _hasUsed.push(obj)
            }
        });
        switch (i){
            case 0 : _notUsed.map((obj,index)=>{
                    _list.push(
                        <li key={index}>
                            <CouponItem item={obj}/>
                        </li>
                    )
            });break;
            case 1 : _hasPass.map((obj,index)=>{
                    _list.push(
                        <li key={index}>
                            <CouponItem item={obj}/>
                        </li>
                    )
            });break;
            case 2 : _hasUsed.map((obj,index)=>{
                    _list.push(
                    <li key={index}>
                        <CouponItem item={obj}/>
                    </li>
                )
            });break;
        }
        this.setState({
            list : _list,
            notUsed : _notUsed,
            hasPass : _hasPass,
            hasUsed : _hasUsed,
        })

    }
    render(){
        let navBarIndex = this.state.navBarIndex,
            list = this.state.list;
        return(
            <div className="myCoupon">
                <header>
                    <ul>
                        <li className={navBarIndex === 0 ? "active" : null} onClick={this.navBarSelect.bind(this,0)}>
                            <span>未使用({this.state.notUsed.length})</span>
                        </li>
                        <li className={navBarIndex === 1 ? "active" : null} onClick={this.navBarSelect.bind(this,1)}>
                            <span>已过期({this.state.hasPass.length})</span>
                        </li>
                        <li className={navBarIndex === 2 ? "active" : null} onClick={this.navBarSelect.bind(this,2)}>
                            <span>已使用({this.state.hasUsed.length})</span>
                        </li>
                    </ul>
                </header>
                {list.length > 0 ? list :<EmptyBox type="noCoupon" size="44%"/> }
                <SideNavBar/>
            </div>
        )
    }
}
ReactMixin.onClass(MyCoupon,Reflux.connect(Store));